/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  StatusBar,
  View,
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';

import VisitNavigator from './visitNavigator';
import ReportNavigator from './reportNavigator';
import QueryCustInfoNavigator from './queryCustInfoNavigator';
import SetNavigator from './setNavigator.js';

import CockpitGesturePassword from './CockpitGesturePassword.js';

export default class Tabbar extends Component {
  constructor(props) {
    super(props);
    this.state = {selectedTab: '附近'};
  }

  componentDidMount(){
    
  }
  
  _backPage(){

  }

  render() {
        return (
            <View style={styles.container} >
                <StatusBar
                    animated={true}
                    hidden={false}
                    backgroundColor="red"
                    barStyle="light-content"
                />
                <TabNavigator tabBarStyle={styles.tab}>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '附近'}
                        title="附近"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("../images/ic_map_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/ic_map_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '附近' })}>
                        <ReportNavigator navigator={this.props.navigator} key="ReportNavigator" _onback={this._backPage.bind(this)}/>
                        {/**<Report navigator={this.props.navigator} key="Report"/> */}
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '调查'}
                        title="调查"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("../images/ic_visit_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/ic_visit_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '调查' })}>
                        <VisitNavigator navigator={this.props.navigator} key="VisitNavigator"/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '已调查'}
                        title="已调查"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("../images/ic_list_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/ic_list_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '已调查' })}>
                        <QueryCustInfoNavigator navigator={this.props.navigator} key="QueryCustInfoNavigator"/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '设置'}
                        title="设置"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("../images/ic_set_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/ic_set_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '设置' })}>
                        <SetNavigator navigator={this.props.navigator} key="SetNavigator" _onback={this._backPage.bind(this)}/>
                        {/**<Set navigator={this.props.navigator} key="Set" _onback={this._backPage.bind(this)}/> */}
                    </TabNavigator.Item>
                </TabNavigator>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    tab: {
        backgroundColor: "#12b7f5"
    },
    tabText: {
        color: "#FFFAFA",
        fontSize: 13,
        marginBottom: 5,
    },
    selectedTabText: {
        color: "#FFFAFA",
        fontSize: 13
    },
    icon: {
        width: 20,
        height: 20
    }
});
